<template>
    <div>
      <el-card>
        <template #header>
          <h2>退住登记</h2>
        </template>
        <!-- 搜索区域 -->
        <el-form :model="searchForm" inline>
          <el-form-item>
            <el-input
              v-model="searchForm.name"
              placeholder="客户姓名"
              clearable
              style="width: 200px"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchData">查询</el-button>
          </el-form-item>
        </el-form>
  
        <div class="table-title">
          <h3>退住申请信息</h3>
        </div>
        <!-- 表格区域 -->
		<el-table :data="tableData" border stripe style="width: 100%;">
		  <el-table-column type="index" label="序号" width="60" />
		  <el-table-column prop="customerName" label="客户姓名" width="100" />
		  <el-table-column prop="checkOutTime" label="退住时间" :formatter="formatDate" width="140" />
		  <el-table-column prop="checkOutType" label="退住类型" width="120" />
		  <el-table-column prop="checkOutReason" label="退住原因" />
		  
		  <!-- 审批状态标签 -->
		  <el-table-column label="审批状态" width="100">
			<template #default="{ row }">
			  <el-tag :type="getStatusType(row.approveStatus)" effect="dark">
				{{ getStatusLabel(row.approveStatus) }}
			  </el-tag>
			</template>
		  </el-table-column>

		  <!-- 审批人姓名 -->
		  <el-table-column prop="operatorUserName" label="审批人" width="120" />

		  <!-- 精确到秒的审批时间 -->
		  <el-table-column prop="approveTime" label="审批时间" :formatter="formatDateTime" width="180" />
		</el-table>
  
        <!-- 分页区域 -->
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @current-change="loadData"
          @size-change="loadData"
        />
      </el-card>
    </div>
</template>
  <script setup>
  import { ref, reactive, watch, inject } from 'vue';
  import dayjs from 'dayjs';
  import { ElMessage } from 'element-plus';
  import qs from 'qs';
  import { jwtDecode } from 'jwt-decode'
  
  // 注入 axios
  const axios = inject('axios');
  
  const nurseId = ref('')

  const getStatusLabel = (status) => {
    switch (status) {
      case 0: return '待审批';
      case 1: return '已通过';
      case 2: return '已拒绝';
      default: return '未知';
    }
  };
  
  const getStatusType = (status) => {
    switch (status) {
      case 0: return 'warning'; // 黄色
      case 1: return 'success'; // 绿色
      case 2: return 'danger';  // 红色
      default: return 'info';   // 灰蓝色
    }
  };
  
  // 精确到秒
  const formatDateTime = (row, col, val) => val ? dayjs(val).format('YYYY-MM-DD HH:mm:ss') : '';

  const init = ()=>{
      let token=sessionStorage.getItem('token');
      const payload = jwtDecode(token);
      const user = JSON.parse(payload.mobileJson)
      nurseId.value=user.id;
      console.log(nurseId.value);
  }
  init();
  
  // 表单与搜索模型
  const formData = reactive({
    id: null,
    customerId: null,
    name:'',
    checkOutTime: '',
    checkOutType: 0,
    checkOutReason: '',
    approveStatus: 0,
    operatorUserId: null,
    approveTime: ''
  });
  const searchForm = reactive({ name: '' });
  
  // 表格与分页
  const tableData = ref([]);
  const currentPage = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  
  // 加载列表
  const loadData = () => {
    axios.post('CheckOutRegistrationController/searchRegistration',qs.stringify({
      cur: currentPage.value,
      number: pageSize.value,
      clientName: searchForm.name,
      healthManagerId: nurseId.value
    })).then(response => {
      const rb = response.data;
      if (rb.status === 200) {
        tableData.value = rb.data;
        total.value = rb.total;
      } else {
        ElMessage.error('加载失败: ' + rb.message);
      }
    });
  };
  watch([currentPage, pageSize], loadData);
  loadData();
  
  // 查询
  const searchData = () => { currentPage.value = 1; loadData(); };
  

  </script>
  
  <style scoped>
  .el-pagination { margin-top: 20px; }
  .table-title { background: #f5f5f5; padding: 8px; margin: 10px 0; }
  </style>